<template>
    <page-view>

        <el-card>
            <template #header>
                <div class="font-bold">菜品列表</div>
            </template>
            <el-form :model="queryFormData" :inline="true">
                <el-form-item label="菜品名称">
                    <el-input placeholder="请输入菜品名称" v-model="queryFormData.food_name" />
                </el-form-item>
                <el-form-item label="评论时间">

                    <div class="block">
                        <el-date-picker v-model="value" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-time="defaultTime1" />
                    </div>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryData" :loading="isLoading">
                        <el-icon>
                            <Search />
                        </el-icon>
                        查询
                    </el-button>
                </el-form-item>
            </el-form>

            <!-- 数据展示 -->
            <div v-loading="isLoading">
                <el-table :data="resultData.listData" border stripe height="800">
                    <el-table-column label="ID" prop="id" width="70" align="center"></el-table-column>
                    <el-table-column label="菜品名称" width="240" prop="foodInfo.food_name" align="center">
                    </el-table-column>
                    <el-table-column label="评论时间" width="180" prop="create_time" align="center">

                    </el-table-column>
                    <el-table-column label="用户" width="180" prop="userInfo.nickName" align="center"></el-table-column>


                    <el-table-column label="评论内容" width="300" align="center" prop="">
                        <template #default="{ row, column, $index }">
                            <div class="ml-16 " @click="drawer = true">
                                <el-link undeline @click="getCommentInfoList(row)">
                                    <div class="text-primaryColor">
                                        {{ textEllipsis(row.comment_text) }}
                                        <el-icon>
                                            <View />
                                        </el-icon>
                                    </div>
                                </el-link>
                            </div>


                        </template>
                    </el-table-column>
                    <el-table-column label="星级" width="320" prop="star" align="center">
                        <template #default="{ row }">
                            <div class="flex flex-row justify-center items-center demo-rate-block ml-[16px] "
                                @click="drawer = true">
                                <span class="demonstration"></span>
                                <el-rate v-model="row.star" :colors="colors"> </el-rate>
                                <span class="text-[#ff9900]">{{ row.star }}分</span>
                            </div>

                        </template>


                    </el-table-column>
                    <el-table-column label="是否显示" width="270" align="center">
                        <template #default="{ row }">
                            <el-switch v-model="row.isShow"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="显示"
                                inactive-text="不显示" />
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center">
                        <template #default="{row}">
                            <el-button type="danger" @click="delteCurrentItem(row.id)" :loading="isLoading">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 页码 -->

                <div class="flex flex-row justify-between items-center mt-10">

                    <div>当前{{ queryFormData.pageIndex }}页，
                        共{{ resultData.pageCount }}页，共{{ resultData.totalCount }}条
                    </div>
                    <el-pagination background layout="prev,pager,next" :total="resultData.totalCount"
                        @current-change="currentChange"></el-pagination>
                </div>
            </div>


        </el-card>
        <!-- 右侧信息框 -->
        <el-drawer v-model="drawer" title="" :with-header="true" :size="small">
            <el-descriptions title="评论详细信息" :column="1" border horizontal >
                <el-descriptions-item label="菜品名称" label-align="left"  label-class-name="my-label" 
                    class-name="my-content" width="100px">{{ detailData.detailList.foodInfo.food_name }}</el-descriptions-item>
                <el-descriptions-item label="菜品价格" label-align="left" label-class-name="my-label"
                    class-name="my-content" width="100px">{{ detailData.detailList.foodInfo.price }}</el-descriptions-item> -->
                 <el-descriptions-item label="评论时间" label-align="left"  label-class-name="my-label"
                    class-name="my-content" width="100px">{{ formatDateTime(detailData.detailList.create_time) }}</el-descriptions-item> 
                 <el-descriptions-item label="客户昵称" label-align="left" label-class-name="my-label"
                    class-name="my-content" width="100px">{{detailData.detailList.userInfo.nickName }}</el-descriptions-item>
                <el-descriptions-item label="客户性别" label-align="left" label-class-name="my-label"
                    class-name="my-content" width="100px">{{detailData.detailList.userInfo.user_sex }}</el-descriptions-item>
                <el-descriptions-item label="客户手机号" label-align="left" label-class-name="my-label"
                    class-name="my-content" width="100px">{{detailData.detailList.userInfo.user_phone }}</el-descriptions-item>
                <el-descriptions-item label="客户邮箱" label-align="left" label-class-name="my-label"
                    class-name="my-content" width="100px">{{detailData.detailList.userInfo.user_email }}</el-descriptions-item>
                <el-descriptions-item label="评分等级" label-align="left" label-class-name="my-label"
                    class-name="my-content" width="100px">
                    <div class="flex flex-row justify-center items-center demo-rate-block ml-[16px] "
                        @click="drawer = true">
                        <span class="demonstration"></span>
                        <el-rate v-model="detailData.detailList.star" :colors="colors"> </el-rate>
                        <span class="text-[#ff9900]">{{detailData.detailList.star }}分</span>
                    </div>
                </el-descriptions-item> 
                 <el-descriptions-item label="评论内容" label-align="left" label-class-name="my-label"
                    class-name="my-content" width="100px">{{ detailData.detailList.comment_text}}</el-descriptions-item>

            </el-descriptions>
        </el-drawer>
    </page-view>

</template>


<script setup>
import { reactive, inject, ref, computed } from "vue";
import { Search, Delete, View } from "@element-plus/icons-vue"
import API from "../../utils/API";
import { ElNotification } from "element-plus";
import { textEllipsis } from "@/utils/StringUtils";
import { onMounted, } from "vue";
import { formatDateTime } from "../../utils/DateTimeUtils";
const drawer = ref(false)

const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])

const baseURL = inject("baseURL");
const queryFormData = reactive({

    pageIndex: 1,
    start_time: "",
    end_time: "",
    food_name: ""

})


const isLoading = ref(false);
const resultData = reactive({
    listData: [],
    pageCount: 0,
    totalCount: 0

});

const detailData = reactive({
    detailList: [],


})
const queryData = () => {
    isLoading.value = true;
    API.commtInfo.getListByPage(queryFormData).then(result => {
        console.log(result);
        resultData.listData = result.listData;
        resultData.pageCount = result.pageCount;
        resultData.totalCount = result.totalCount;

    }).finally(() => {
        isLoading.value = false
    })
}
//获取详细评论信息
const getCommentInfoList = (row) => {
    // API.commtInfo.getCommentInfoListByFid({fid:id,pageIndex:queryFormData.pageIndex}).then((result) => {
    //     console.log(result);
    //     detailData.detailList=result.listData;
    // }).catch(error => {
    //     console.log(error);
    // })
    detailData.detailList = row;
    console.log(row);
    console.log(detailData.detailList.foodInfo);
    console.log(detailData.detailList.foodInfo.food_name);
    console.log(detailData.detailList.userInfo.nickName);
}
//页码发生变化
const currentChange = (index) => {
    queryFormData.pageIndex = index;
    queryData();
}
const delteCurrentItem = (id) => {
    API.commtInfo.deleteById(id).then(result=>{
        ElNotification({
            type: "seccess",
            title: "删除成功",
            message: "当前菜品删除成功"
        });
        queryData();
    }).catch(error=>{
        ElNotification({
            type: "danger",
            title: "删除失败",
            message: "当前菜品删除失败,请重试或联系管理员"
        });
    })
};
const value = ref('');
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'

onMounted(() => {
    queryData();

})
</script>


<style scoped>
.demo-rate-block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 49%;
    box-sizing: border-box;
}

.demo-rate-block:last-child {
    border-right: none;
}

.demo-rate-block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>